<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn1">开启一个倒计时定时器</button>
    <button class="btn2">停止一个倒计时定时器</button>
    <script>
      //1.倒计时定时器 setTimeout: 倒计时一段时间后执行代码
      /*  document.onclick = function () {
              var res = setTimeout(function () {
                console.log("倒计时2秒之后执行函数里的代码");
              }, 2000);
              console.log(res); //返回一个数值 类似id  第一个计时器就是1

              var res2 = setTimeout(function () {
                console.log("倒计时2秒之后执行函数里的代码");
              }, 2000);
              console.log(res2); //这里第二个计时器返回2
            }; */

      //停止计时器: clearTimeout
      /*  var btn1 = document.querySelector(".btn1");
           var btn2 = document.querySelector(".btn2");
           var timer1, timer2;

           btn1.onclick = function () {
             console.log("开启一个定时器");
             timer1 = setTimeout(function () {
               console.log("定时器111");
             }, 2000);
             timer2 = setTimeout(function () {
               console.log("定时器222");
             }, 5000);
           };

           btn2.onclick = function () {
             console.log("停止定时器");
             clearTimeout(timer2); //timer2就不会执行
           }; */

      //2.间隔定时器: 间隔一段时间 不停的执行代码
      //开启一个定时器
      /* var num = 0;
           var res = setInterval(function () {
             num++;
             console.log("setInterval " + num);
           }, 1000);

           console.log(res); */

      //停止间隔定时器
      /* var num = 0;
           var res = setInterval(function () {
             console.log(num++);
           }, 1000);
           document.onclick = function () {
             console.log("停止间隔定时器");
             clearInterval(res);
           };
      */

      //3.定时器里的注意点:
      //第一: 清除定时器方法可以混用
      /*  var timer = setInterval(function () {
             console.log("执行了");
           }, 1000);
           document.onclick = function () {
             clearTimeout(timer);
             console.log("清除计时");
           }; */

      //第二个: 利用setTimeout 模拟setInterval
      /*  function fn() {
             setTimeout(function () {
               console.log("执行了");
               fn();
             }, 1000);
           }
           fn(); */

      //第三个: 定时器的执行顺序
      //同步和异步任务
      setTimeout(function () {
        console.log(111);
      }, 1000);
      console.log(222);

      //第四个: 定时器里的this 指向window
      document.onclick = function () {
        console.log(this); //事件源
        setTimeout(function () {
          console.log(this); //this是window
        }, 1000);
      };
    </script>
  </body>
</html>
